<template>
    <header class="header">
      <h1>小黑记事本</h1>
      <input v-model.trim="todo" @keyup.enter='add' placeholder="请输入任务" class="new-todo" />
      <button @click="add" class="add">添加任务</button>
    </header>
  </template>
  
  <script>
  export default {
    data(){
      return{
        todo:''
      }
    },
    methods:{
     add(){
      //1.非空校验
      if(!this.todo){
        alert('任务不能为空')
        return
      }
      //2.包装对象
      const obj={
        id:Math.floor(Math.random()*100000),
        title:this.todo
      }
      //3.发射自定义事件
      this.$emit('addTodo',obj)
      //4.清空输入框
      this.todo=''
     } 
    }
  
  }
  </script>
  
  <style></style>